<template>
    <div class="warp">
        <div class="content">
            <!-- 查询条件，默认在页面加载后，组件会触发一次queryHandle事件 -->
            <commonQuery @queryHandle="queryCick" :allowAllFieldList="['categoryType']"></commonQuery>


            <div style="color: rgb(255, 0, 0);
                        font-size: 13px;
                        margin-left: 2px;
                        margin-bottom: 0px;">* 参与参评的信息以用户最后一次提交信息为准，用户保存数据不参与参评</div>
            <div class="content-table">
                  <el-table
                        :data="tableData"
                        border
                        size="small"
                        style="width: 100%"
                        header-row-class-name="table-header">
                    <el-table-column
                            prop="userName"
                            label="姓名"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="curCategoryChildName"
                            label="现岗位"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="curAcademicName"
                            label="现职称等级"
                            align="center">
                    </el-table-column>
                    <el-table-column
                            prop="firstCheckDate"
                            label="现职称获取时间"
                            align="center">
                        <template slot-scope="scope">
                            {{scope.row.curAcademicDate.substr(0,10)}}
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="name"
                            label="拟参评职称等级"
                            align="center">
                            <template slot-scope="scope">
                                <span v-if='scope.row.academicType == "100"'>续任初职</span>
                                <span v-else-if='scope.row.academicType == "101"'>初职晋中职</span>
                                <span v-else-if='scope.row.academicType == "110"'>续任中职</span>
                                <span v-else-if='scope.row.academicType == "111"'>中职晋副高</span>
                                <span v-else-if='scope.row.academicType == "120"'>续任副高</span>
                                <span v-else-if='scope.row.academicType == "121"'>副高晋正高</span>
                                <span v-else-if='scope.row.academicType == "130"'>续任正高</span>
                                <span v-else-if='scope.row.academicType == "200"'>未知类型</span>
                            </template>
                          
                    </el-table-column>
                      <el-table-column
                              prop="categoryChildName"
                              label="拟参评岗位"
                              align="center">
                      </el-table-column>
                    <el-table-column
                            prop="hasAcross"
                            label="是否符合"
                            align="center">
                            <template slot-scope="scope">
                                <span v-if="scope.row.firstCheckStatus==1">是</span>
                                <span v-else>否</span>
                            </template>
                    </el-table-column>
                    <el-table-column
                            label="详情"
                            align="center">
                        <template slot-scope="scope">
                            <el-button @click.stop="viewDeatil(scope.row)" type="text" size="small">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination">
                <el-pagination
                        background
                        layout="total,prev, pager, next"
                        @current-change="pageClick"
                        :total="total"
                        :current-page="pageNum"
                        :page-size="pageSize"
                        >
                </el-pagination>
            </div>
        </div>
        <div class="aside-fr">
            <h6 class="moduleName">实际工作单位</h6>
            <div v-for="(item,i) in asideNav" :key="i"
                 @click="handleAsideActive(i,item.name)"
                :class="{active:i == asideIndex}">
                {{item.name}}
            </div>
        </div>
        
         <!-- 信息预览 -->
         <base-info-preview ref="infoPreview" class="infoPreview" :userName="userName" :userId="userId"></base-info-preview>


    </div>
</template>

<script>
    import commonQuery from "./CommonQuery";

    import { participationPeopleListPost,findListByType,qaStandardRecordFindList,qaStandardRecordFindDetails } from '@/service/api'
    import { infoProcessing } from '../../service/personalInfoDataProcessing'
    import Qs from 'qs'
    export default {
        name: "personnelInfo",
        data() {
            return {
                formQuery:'',
                organization:'',     // 工作单位名称

                asideNav: [{name:'全部'}],
                asideIndex: 0,

                tableData:[],
                total:0,
                pageNum:1,
                pageSize:12,

                allFieldList:[],
                userName:'',
                userId:''
            }
        },
        components:{
            commonQuery
        },
        created() {
            // 获取右侧单位列表
            this.getFindListByType();
        },
        methods:{
            queryCick(queryObj){
                this.pageNum = 1;
                this.loadData(queryObj);
            },
            // 数据列表 - 获取
            loadData(queryObj){
                queryObj.pageNum = this.pageNum;
                queryObj.pageSize = this.pageSize;
                queryObj.hasPass = null;  // 是否符合条件： true 符合，false 不符合 null 全部
                queryObj.organization = this.organization;

                this.formQuery = JSON.parse(JSON.stringify(queryObj));

                participationPeopleListPost(Qs.stringify(queryObj)).then(res => {
                    if(res.code == 200){
                        this.tableData = res.data.data;
                        
                        this.pageNum = res.data.pageNum;
                        this.pageSize = res.data.pageSize;
                        this.total = res.data.total;
                    }
                });
            },
            // 数据列表 - 翻页
            pageClick(e) {
                this.pageNum = e;
                this.loadData(this.formQuery);
            },
            // 数据列表 - 查看人员详情
            viewDeatil(e) {
               this.userName = e.userName;
               this.userId = e.userId;
               this.$refs.infoPreview.$el.style.display = "flex";
            },

            // 右侧单位列表 - 获取单位列表
            getFindListByType() {
                let params = {type:'1010002901'}
                findListByType(params).then(res => {
                    if(res.code == 200){
                        res.data.forEach(v=>{
                            this.asideNav.push(v)
                        })

                    }else {
                        console.log(res)
                    }
                });
            },
            // 右侧单位列表 - 点击单位项
            handleAsideActive(i,name){
                this.asideIndex = i;
                this.pageNum = 1;
                if(name == '全部'){
                    this.organization = '';
                    this.loadData(this.formQuery);
                }else {
                    this.organization = name;
                    this.loadData(this.formQuery);
                }
            },

        }
    }
</script>

<style scoped>
    .warp {
        height: 100%;
        min-width: 800px;
        display: flex;
        justify-content: space-between;
    }
    
    .content{
        width: 82%;
        min-height: 520px;
        height: 100%;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow: hidden;
        margin-right: 10px;
        position: relative;
    }

    .aside-fr{
        width: 18%;
        max-height: 735px;
        margin-left: 10px;
        box-sizing: border-box;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 9px 8px 2px rgba(43, 103, 254, 0.05);
        border-radius: 5px;
        overflow-x: hidden;
        overflow-y: scroll;
        z-index:1;
    }
    /*.aside-fr::-webkit-scrollbar {*/
        /*width: 9px;  !* 横向滚动条宽度 *!*/
        /*height: 9px; !* 竖向滚动条宽度 *!*/
        /*background: rgba(0,0,0,.0);*/
        /*border:none;*/
    /*}*/
    /*!* 滚动条 - 滚动块样式 *!*/
    /*.aside-fr::-webkit-scrollbar-thumb {*/
        /*background: rgba(0,0,0,.0);*/
        /*border:none;*/
        /*border-radius:4px*/
    /*}*/
    .aside-fr > div{
        height: 38px;
        line-height: 38px;
        text-align: center;
        color: #999999;
        flex-grow: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        cursor: pointer;
        font-size: 14px;
    }
    .aside-fr > div.active{
        background: #F5F8FD;
        color: #31478F;
        font-weight: bold;
        position: relative;
    }
    .aside-fr > div.active::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 3px;
        height: 38px;
        background: #31478F;
    }
    .refresh-bar{
        text-align: right;
    }
    .refresh-bar p{
        display: inline-block;
        width:44px;
        background:rgba(234,237,244,1);
        border:1px solid rgba(142,165,241,1);
        border-radius:17px;
        text-align: center;
        padding: 1px 0px;
        font-size: 12px;
        color:rgba(47,73,160,1);
        cursor: pointer;
        margin-right: 30px;
    }
    .content-table {
        min-height: 410px;
        border-radius: 5px 5px 0px 0px;
        overflow: hidden;
    }

    .content-table >>> .table-header th {
        background: #E6EAEB !important;
        border: none;
    }
    .content-table >>> .table-header th div{
        font-weight:bold !important;
        color: #333;
    }

    .content-table >>> tbody tr:nth-child(even) td {
        background: #F5F8FE;
    }

    .content-table >>> tbody .el-button {
        padding: 5px 15px;
    }
    .pagination{
        margin-top: 10px;
        text-align: end;
        padding-right: 16px;
    }
    .moduleName{
        background: #31478F;
        margin-bottom: 8px;
        font-size: 14px;
        font-weight: bold;
        padding: 11px 0px;
        text-align: center;
        color: white;
        border-top-left-radius: 5px;
        border-top-right-radius: 5px;
    }
    .warp >>> .el-table--small,
    .warp >>> .el-button--small{
        font-size: 13px;
    }
</style>
